<template>
    <div class="erpInfoBasePerson-container flex flex-col">
        <a-card class="mb-2.5">
            <common-form :model="state.queryForm" name="menu-form" @query="handleQuery" @add="handleAdd"
                @reset="handleReset">
                <a-form-item label="姓名" name="name" class="w-1/2.5">
                    <a-input v-model:value="state.queryForm.name" />
                </a-form-item>
                <a-form-item label="类型" name="type" class="w-1/5">
                    <a-select v-model:value="state.queryForm.type" placeholder="" allowClear>
                        <a-select-option value="销售员">销售员</a-select-option>
                        <a-select-option value="财务员">财务员</a-select-option>
                    </a-select>
                </a-form-item>
            </common-form>
        </a-card>
        <a-card class="flex-1 card-table">
            <common-table :columns="columns" :data="state.tableData" :pagination="{
                total: state.tableParams.total,
                current: state.tableParams.page,
                pageSize: state.tableParams.pageSize,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['2', '5', '10', '20'],
                showTotal: (total: number) => `总数: ${total}`
            }" :loading="state.loading" @change="changePagination">
                <template #bodyCell="{ column, text, record }">
                    <template v-if="column.dataIndex === 'operation'">
                        <div class="w-full">
                            <a-button ghost type="primary" class="mr-1" @click="handleEdit(record)">编辑</a-button>
                            <a-button danger type="primary" class="mr-1" @click="handleDelete(record)">删除</a-button>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex == 'enabled'">
                        <a-tag v-if="record.enabled" color="green">启用</a-tag>
                        <a-tag v-else color="red">停用</a-tag>
                    </template>
                </template>
            </common-table>
        </a-card>
        <a-modal v-model:open="state.isShow" :title="state.isEdit ? '编辑' : '新增'" @ok="handleAddEdit"
            @cancel="handleCancel">
            <a-form ref="formRef" :model="state.formState" name="basinfo-form" autocomplete="off"
                :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '姓名不能为空', trigger: 'blur' }]">
                    <a-input v-model:value="state.formState.name" />
                </a-form-item>
                <a-form-item label="类型" name="type" :rules="[{ required: true, message: '类型不能为空', trigger: 'blur' }]">
                    <a-select v-model:value="state.formState.type" placeholder="" allowClear>
                        <a-select-option value="销售员">销售员</a-select-option>
                        <a-select-option value="财务员">财务员</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="排序" name="sort" :rules="[{ required: true, message: '排序不能为空', trigger: 'blur' }]">
                    <a-input-number class="w-full" :min="0" v-model:value="state.formState.sort" />
                </a-form-item>
                <a-form-item label="状态" name="enabled">
                    <a-switch v-model:checked="state.formState.enabled" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>


<script setup lang="ts" name="ErpInfoBasePerson">
import { ref, reactive, onMounted, useTemplateRef, h } from 'vue'
import CommonForm from '@/components/common-form/index.vue'
import CommonTable from '@/components/common-table/index.vue'
import { EditOutlined } from '@ant-design/icons-vue'
import { addInfoBasePersonApi, deleteInfoBasePersonApi, getInfoBasePersonListApi, updateInfoBasePersonApi } from '@/api/erp/infobase'
import type { ResType } from '@/api/types'
import type { TablePramsType } from '@/types'
import type { TableParamsResType } from '@/views/system/onlineUser/type'
import type { FormInstance } from 'ant-design-vue'
import { showMsg } from '@/utils'

defineOptions({
    name: "ErpInfoBasePerson"
})

const formRef = ref<FormInstance>()

const state = reactive({
    queryForm: {
        name: "",
        type: ""
    } as any,
    tableData: [] as any[],
    tableParams: {
        page: 1,
        pageSize: 50,
        total: 0 as any,
    },
    formState: {

    } as any,
    loading: false,
    isShow: false,
    isEdit: false
})

const columns: any[] = [
    {
        title: '序号',
        align: "center",
        width: 60,
        customRender: ({ index }: { index: number }) => {
            return `${index + 1}`;
        },
        fixed: 'left',
    },
    {
        title: '姓名',
        align: "center",
        key: "name",
        dataIndex: 'name',
        width: 120,
    },
    {
        title: '类型',
        align: "center",
        key: "type",
        dataIndex: 'type',
        width: 120,
    },
    {
        title: '排序',
        align: "center",
        key: "sort",
        dataIndex: 'sort',
        width: 120,
    },
    {
        title: '状态',
        align: "center",
        key: "enabled",
        dataIndex: 'enabled',
        width: 120,
    },
    {
        title: '操作',
        align: 'center',
        key: "operation",
        dataIndex: 'operation',
        width: 250,
        fixed: 'right',
    }
]

const handleQuery = async () => {
    state.loading = true
    const params = Object.assign(state.tableParams, state.queryForm)
    const res: ResType<TableParamsResType<any>> = await getInfoBasePersonListApi(params)
    state.tableData = res.data.result.items
    state.loading = false
}

const handleAdd = async () => {
    state.isShow = true
}

const handleReset = async () => {
    state.queryForm = {
        name: "",
        type: ""
    }
    await handleQuery()
}

const handleAddEdit = async () => {
    await formRef.value?.validate()
    if (state.isEdit && state.formState.id) {
        const res: ResType<any> = await updateInfoBasePersonApi(state.formState)
        if (res.data.code == 200) {
            showMsg("操作成功", 'success')
            handleCancel()
            await handleQuery()
        }
        state.isEdit = false
    } else {
        const res: ResType<any> = await addInfoBasePersonApi(state.formState)
        if (res.data.code == 200) {
            showMsg("操作成功", 'success')
            handleCancel()
            await handleQuery()
        }
    }
}
const handleCancel = () => {
    state.isShow = false
    state.formState = {}
}
const changePagination = async (pagination: { current: number, pageSize: number }) => {
    state.tableParams.page = pagination.current
    state.tableParams.pageSize = pagination.pageSize
    await handleQuery()
}

const handleEdit = (record: any) => {
    state.formState = { ...record }
    state.isShow = true
    state.isEdit = true
}

const handleDelete = async (record: any) => {
    const res: ResType<any> = await deleteInfoBasePersonApi({ id: record.id })
    if (res.data.code == 200) {
        showMsg("操作成功", 'success')
        await handleQuery()
    } else {
        showMsg("操作失败", 'error')
    }
}

onMounted(async () => {
    await handleQuery()
})
</script>

<style lang="scss" scoped>
.erpInfoBasePerson-container {
    .card-table {
        :deep(.ant-card-body) {
            height: 100%;
        }
    }
}

:deep(.ant-table-cell-fix-right) {
    // right: 0 !important;
}

:deep(.ant-btn >span) {
    display: inline-flex !important;
}
</style>